import React, { PureComponent } from 'react';
// 引入样式
import './scss/calculator.scss'
import { Input } from 'antd';
export default class Calculator extends PureComponent {
  constructor() {
    super()
    this.state = {
      input: ''
    }
  }

  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }

  // 按钮点击事件
  getInput = (int) => {
    let { input } = this.state;
    if (!input) {
      if (int === '+' || int === '-' || int === '*' || int === '/' || int === '.') {
        return;
      }
    }
    if (int === '+' || int === '-' || int === '*' || int === '/' || int === '.') {
      let inp = String(input);
      let strInp = inp.substring(inp.length - 1);
      if (strInp === '+' || strInp === '-' || strInp === '*' || strInp === '/' || strInp === '.') {
        return;
      }
    }
    this.setState({
      input: input + int
    })
  }
  // 计算结果
  getInputEval = () => {
    let { input } = this.state;
    if (!input) {
      return;
    }
    let inp = String(input);
    let strInp = inp.substring(inp.length - 1);
    if (strInp === '+' || strInp === '-' || strInp === '*' || strInp === '/' || strInp === '.') {
      return;
    }
    // 替代eval方法
    function evil (fn) {
      var Fn = Function;
      // 如果你看到了我，就请你刷新一下
      return new Fn('return ' + fn)();
    }
    this.setState({
      input: evil(input)
    })
  }
  // 清空input
  deleteInput = () => {
    this.setState({
      input: ''
    })
  }
  // 删除最后一位
  deleteIndex = () => {
    let { input } = this.state;
    if (!input) {
      return;
    }
    let inp = String(input);
    // 删除最后一位
    let strInp = inp.substring(0, inp.length - 1);
    this.setState({
      input: strInp
    })
  }
  render () {
    return (
      <div className='calculator'>
        <div className='calculator_text'>
          <Input placeholder="0" disabled={true} className='calculator_input' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" />
        </div>
        <ul className='calculator_body'>
          <li className='calculator_li_back' onClick={this.deleteInput}>C</li>
          <li className='calculator_li_back' onClick={this.deleteIndex}>←</li>
          <li className='calculator_li_back' onClick={() => this.getInput('-')}>%</li>
          <li className='calculator_li_border' onClick={() => this.getInput('/')}>÷</li>
          <li onClick={() => this.getInput(7)}>7</li>
          <li onClick={() => this.getInput(8)}>8</li>
          <li onClick={() => this.getInput(9)}>9</li>
          <li className='calculator_li_border' onClick={() => this.getInput('*')}>x</li>
          <li onClick={() => this.getInput(4)}>4</li>
          <li onClick={() => this.getInput(5)}>5</li>
          <li onClick={() => this.getInput(6)}>6</li>
          <li className='calculator_li_border' onClick={() => this.getInput('-')}>-</li>
          <li onClick={() => this.getInput(1)}>1</li>
          <li onClick={() => this.getInput(2)}>2</li>
          <li onClick={() => this.getInput(3)}>3</li>
          <li className='calculator_li_border' onClick={() => this.getInput('+')}>+</li>
          <li style={{ width: '45vw', borderRadius: '11vw' }} onClick={() => this.getInput(0)}>0</li>
          <li onClick={() => this.getInput('.')}>.</li>
          <li className='calculator_li_border' onClick={this.getInputEval}>=</li>
        </ul>
      </div >
    )
  }
}